<template>
    <div class="wx-switch-wrapper" @click="handleClick">
        <div class="wx-switch" 
            :style="{'background-color': checked ? checkedColor : '#d9d9d9'}">
            <text ref="switchCore" class="switch-core"></text>
        </div>
        <text class="blk" ref="blk" :style="blkStyle"></text>
    </div>
</template>
<style scoped>
    .wx-switch-wrapper {
        width: 104px;
        height: 64px;
        justify-content: center;
    }

    .wx-switch {
        width: 104px;
        height: 32px;
        border-radius: 32px;
        border-width: 1px;
        border-style: solid;
        border-color: #ddd;
        background-color: #d9d9d9;
    }
    
    .blk {
        position: absolute;
        top: 5px;
        left: 0px;
        z-index: 100;
        height: 52px;
        width: 56px;
        background-color: #fff;
        border-radius: 52px;
    }

    .switch-core {
        position: absolute;
        top: 0;
        width: 102px;
        height: 30px;
        background-color: #fdfdfd;
        border-radius: 30px;
    }

</style>
<script>
    const animation = weex.requireModule('animation');

    export default {
        props: {
            value: {
                type: Boolean,
            },
            disabled: {
                type: Boolean,
            },

            checkedColor: {
                type: String,
                default: '#027FF3',
            }
        },

        data () {
            return {
                checked: false,
                blkStyle: {},
            }
        },

        created () {
            this.initBlkStyle();
        },

        mounted () {
            this.checked = this.value;
            this.blkAnimation(true);
            this.animation(true);
        },

        methods: {
            handleClick (e) {
                e.preventDefault && e.preventDefault();
                e.stopPropagation && e.stopPropagation();
                if (this.disabled) return;
                this.checked = !this.checked;
                this.animation();
                this.blkAnimation();
            },

            animation (isInit = false) {
                let el = this.$refs.switchCore;
                let s = this.checked ? '0' : '1';
                animation.transition(el, {
                    styles: {
                        transform: `scale(${s})`
                    },
                    duration: isInit ? 0 : 300,
                    timingFunction: 'linear',
                    needLayout: false,
                    delay: 0
                });
            },

            blkAnimation (isInit = false) {
                let el = this.$refs.blk;
                let x = this.checked ? '45px' : '0px';
                animation.transition(el, {
                    styles: {
                        transform: `translateX(${x})`
                    },
                    duration: isInit ? 0 : 300,
                    timingFunction: 'linear',
                    needLayout: false,
                    delay: 0
                }, () => {
                    this.$emit('wxChange', this.checked);
                    this.$emit('input', this.checked);
                });
            },

            // android不支持阴影
            initBlkStyle () {
                const platform = weex.config.env.platform.toLowerCase();
                if (platform === 'android') {
                    this.blkStyle = {
                        'border-width': '1px',
                        'border-style': 'solid',
                        'border-color': '#d9d9d9',
                    }
                } else {
                    this.blkStyle = {
                        'box-shadow': '0 1px 3px rgba(0,0,0,.4)',
                    }
                }
            }
        }
    }
</script>